<template>
  <div class="test-wrapper">
    <div class="nav">
      <span>导师列表</span>
    </div>
    <div class="update">
      <el-button icon="el-icon-shuaxin iconfont" />
    </div>
    <list-layout>
      <template slot="header">
        <conditions v-permission="['admin']" />
      </template>
      <template slot="middle">
        <tabs-head />
      </template>
      <template slot="content">

        <al-table
          :column="formData.column"
          :data="formData.data"
          :pagination="false"
          border
        />
        <div class="end-tables">
          <span>显示第1列到第3条记录，总共3条记录</span>
        </div>
      </template>
    </list-layout>
  </div>
</template>

<script>
import { getTestList } from '@/api/table'
import ListLayout from '@/components/ListLayout/index.vue'
import AlTable from '@/components/AlTable/index.vue'
import Conditions from './components/conditions/index.vue'
import tabsHead from './components/tabsHead/index.vue'
import permission from '@/directive/permission/index.js' // 权限判断指令

export default {
  name: 'Table',
  components: {
    ListLayout,
    AlTable,
    Conditions,
    tabsHead
  },
  directives: { permission },
  data() {
    return {
      formData: {
        column: [
          {
            prop: 'nick',
            label: '昵称',
            sortable: true,
            align: 'center'
          },
          {
            prop: 'phone',
            label: '手机号',
            sortable: true,
            align: 'center'
          },
          {
            prop: 'name',
            label: '真实姓名',
            sortable: true,
            align: 'center'
          },
          {
            prop: 'subject',
            label: '所属学科',
            sortable: true,
            align: 'center'
          },
          {
            prop: 'job',
            label: '职位',
            sortable: true,
            align: 'center'
          },
          {
            prop: 'year',
            label: '工作年限',
            sortable: true,
            align: 'center'
          },
          {
            prop: 'updateTime',
            label: '录入时间',
            sortable: true,
            align: 'center'
          },
          {
            prop: 'actions',
            label: '操作',
            align: 'center',
            render(_, scope) {
              return (<div >
                <span><a class='act' href='#'>查看</a></span>
                <span>|</span>
                <span><a class='act' href='#'>编辑</a></span>
                <span>|</span>
                <span><a class='act' href='#'>删除</a></span>
              </div>)
            }
          }
        ],
        data: [

        ]
      }

    }
  },
  created() {
    getTestList().then((res) => {
      const { code, data } = res
      // console.log(code);

      if (Number(code) === 20000) {
        const { items, total } = data
        console.log(total)
        this.formData.data = items
        // console.log(this.formData.list);
      }

      // console.log('test', res)
    })
  }
}
</script>

<style>
  .act{
      color:blue;
      border-bottom: 1px solid #0000ff;
    }
  .nav{
    padding-top: 50px;
    padding-left: 20px;
    border-bottom:1px solid #ddd ;
    height: 80px;
    color: #555;
    margin: 0 5px;
  }

  .update{
    margin: 0 30px;
    margin-top: 20px;
    border-top:3px solid #E4E7ED;
    border-bottom: 1px solid #E4E7ED;
    height: 50px;
    line-height: 50px;
  }

  .update .el-button{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
  }

  .update .el-button .el-icon-shuaxin{
    display: block;
    top: 50%;
    transform: translateY(-40%);
  }
  .end-tables{
    border: 1px solid #E4E7ED;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    color: #606266;
    padding-left :20px; ;
  }
</style>
